<template>
  <view class="orders_item_box" @click="emit('onClick')">
    <view>
      <!-- 维修内容： -->
      <binary-layout :middle-text="props.title">
        <template #left>
          <view style="width: 140rpx">维修内容:</view>
        </template>
      </binary-layout>

      <!-- 维修地址： -->
      <binary-layout :middle-text="props.address">
        <template #left>
          <view style="width: 140rpx">维修地址:</view>
        </template>
      </binary-layout>

      <!-- 上门时间： -->
      <binary-layout :left-text="`上门时间:`" :middle-text="props.times" />

      <!-- 提交时间： -->
      <binary-layout
        :left-text="`提交时间:`"
        :middle-text="props.createTimes"
      />

      <!-- 订单状态： -->
      <view class="msg">
        <binary-layout :left-text="`订单状态:`">
          <template #right>
            <view class="list">
              <view
                :class="{
                  bth: submittedState,
                  state: !submittedState,
                }"
              >
                {{
                  !submittedState ? getEnumValue(props.state) : '去修改'
                }}</view
              >
            </view>
          </template>
        </binary-layout>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {
  MaintenanceStateEnum,
  checkStateEnum,
  getEnumValue,
} from '@/config/enum/enum'
import binaryLayout from '@/components/layout/binary_layout/binary-layout.vue'
import { ref } from 'vue'

//接受父组件参数
const props = defineProps({
  /**
   * 维修标题
   */
  title: {
    type: String,
    default: '',
  },
  /**
   *上门地址
   */
  address: {
    type: String,
    default: '',
  },
  /**
   * 上门时间
   */
  times: {
    type: String,
    default: '',
  },
  /**
   * 提交时间
   */
  createTimes: {
    type: String,
    default: '',
  },
  /**
   * 订单状态
   */
  state: {
    type: Number,
    default: 0,
  },
})

//状态：是否已提交
const submittedState = ref(
  checkStateEnum(props.state, MaintenanceStateEnum.SUBMITTED) ||
    checkStateEnum(props.state, MaintenanceStateEnum.ACCEPT)
)

//自定义事件
const emit = defineEmits<{
  (e: 'onClick'): void
}>()
</script>

<style scoped lang="scss">
.orders_item_box {
  padding: 0 20rpx 10rpx;
  background-color: $uni-bg-color;
  margin: 20rpx 0 30rpx;

  .msg {
    text-align: right;
    color: rgb(246, 177, 16);
    font-size: 30rpx;
    border-top: 2rpx solid rgba(184, 180, 180, 0.213);

    .list {
      display: flex;
      .bth {
        font-size: 30rpx;
        padding: 10rpx 14rpx;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10rpx;
        background-color: rgb(246, 166, 16);
        color: rgb(255, 255, 255);
      }
    }
  }

  .state {
    color: rgb(246, 177, 16);
    width: 110rpx;
    text-align: right;
  }
}
</style>
